<template>
	<view class="page">
		<div class="form">
			<div class="list">
				<span class="left">店铺名</span>
				<span class="right">
					<input type="text" placeholder="请输入店铺名" v-model="name" />
				</span>
			</div>
			<div class="list">
				<span class="left">联系人</span>
				<span class="right">
					<input type="text" placeholder="请输入联系方式" v-model="contacts" />
				</span>
			</div>
			<div class="list">
				<span class="left">联系方式</span>
				<span class="right">
					<input type="text" placeholder="请输入联系方式" v-model="tel" />
				</span>
			</div>
			<div class="list">
				<span class="left">所在地区</span>
				<span class="right" @click="chooseAdress">
					<span v-if="!address" style="color: #777777;">请选择</span>
					<span v-if="address">{{address}}</span>
					<!-- <input type="text" placeholder="请选择上门地址" @click="chooseAdress" v-model="address"  readonly="true"/> -->
				</span>
			</div>
			<div class="list">
				<span class="left">详细地址</span>
				<span class="right">
					<input type="text" placeholder="请输入详细地址" v-model="detailed_address" />
				</span>
			</div>
			<div class="list">
				<span class="left">工作时间</span>
				<span class="right">
					<input type="text" placeholder="请输入工作时间" v-model="appointment" />
				</span>
			</div>
			<div class="list">
				<span class="left">商家描述</span>
				<span class="right">
					<input type="text" placeholder="请输入商家描述" v-model="content" />
				</span>
			</div>
		</div>
		<div class="form" style="margin-top: 20rpx;">
			<div class="box">
				<view class="title">店铺图片</view>
				<div>
					<view class="image-item" v-for="item,index in imageList">
						<image :src="item" mode=""></image>
						<i class="delete" @click="deleteImg(index)"></i>
					</view>
					<span class="card_01" @click="chooseImage">
						<image src="../../static/register_01.png"></image>
					</span>
				</div>
			</div>
		</div>
		<div class="input">
			<button @click="submit">确定入驻</button>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				tel: '',
				address: '',
				detailed_address: '',
				lng: '',
				lat: '',
				id: "",
				content:"",
				contacts:"",
				appointment:"",
				imageList:[],
				images:"",
			}
		},
		methods: {
			deleteImg(index){
				this.imageList.splice(index,1)
			},
			chooseImage(type) {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						 var imgFiles = res.tempFilePaths[0];
						 console.log(imgFiles)
						uni.uploadFile({
							// 需要上传的地址
							url: this.$domain + 'common/upload',
							header: { 'content-type': 'application/x-www-form-urlencoded;charset=utf-8','token':uni.getStorageSync('token') ||"" },
							filePath: imgFiles,
							name: 'file',
							success:(res1)=> {
								// 显示上传信息
								var res1 = JSON.parse(res1.data);
								if(res1.code == 1){
									this.imageList.push(res1.data.fullurl)
								}
								console.log(res1)
							}
						});
					}
				})
			},
			chooseAdress() {
				var that = this;
				uni.chooseLocation({
					success: (res) => {
						this.address = res.address + res.name;
						this.lng = res.longitude;
						this.lat = res.latitude;
					},
					fail: (res) => {
						console.log(res)
						wx.getSetting({
							success: function(res) {
								var statu = res.authSetting;
								if (!statu['scope.userLocation']) {
									wx.showModal({
										title: '是否授权当前位置',
										content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
										success(tip) {
											if (tip.confirm) {
												wx.openSetting({
													success: function(data) {
														if (data.authSetting[
																"scope.userLocation"
																] === true) {
															wx.showToast({
																title: '授权成功',
																icon: 'success',
																duration: 1000
															})
															//授权成功之后，再调用chooseLocation选择地方
															setTimeout(
																function() {
																	that.chooseAdress()
																}, 1000)
														}
													}
												})
											} else {
												wx.showToast({
													title: '授权失败',
													icon: 'none',
													duration: 1000
												})
											}
										}
									})

								}
							}
						})
					}
				});
			},
			submit() {
				var params = {
					name: this.name,
					address: this.address + this.detailed_address,
					lng: this.lng,
					lat: this.lat,
					contacts: this.contacts,
					tel: this.tel,
					images:this.imageList.toString(),
					appointment:this.appointment,
					content:this.content,
				}
				if (!params.name) {
					uni.showToast({
						title: "请输入店铺名！",
						icon: "none"
					});
					return
				}
				if (!params.contacts) {
					uni.showToast({
						title: "请输入联系人！",
						icon: "none"
					});
					return
				}
				if (!params.tel) {
					uni.showToast({
						title: "请输入联系方式！",
						icon: "none"
					});
					return
				}
				if (!params.lat) {
					uni.showToast({
						title: "请选择所在地区！",
						icon: "none"
					});
					return
				}
				if (!params.address) {
					uni.showToast({
						title: "请输入详细地址！",
						icon: "none"
					});
					return
				}
				if (!params.appointment) {
					uni.showToast({
						title: "请输入工作时间！",
						icon: "none"
					});
					return
				}
				if (!params.content) {
					uni.showToast({
						title: "请输入商家描述！",
						icon: "none"
					});
					return
				}
				if (this.id) {
					params.id = this.id
				}
				this.$post('shop/shopadd', params, (res) => {
					uni.showToast({
						title: "保存成功！",
					})
					uni.navigateBack({
					  success: () => {
					    let page = getCurrentPages().pop();
					    if (page) {
					       page.onLoad(page.options);//执行上个页面的方法
					    };
					  }
					})

				})
			},
		},
		onLoad(option) {
		},
	}
</script>

<style>
	.form {
		font-size: 30rpx;
		color: #333;
		background-color: #FFFFFF;
		padding: 0 40rpx;
	}

	.form .list {
		padding: 28rpx 0;
		border-bottom: 1px solid #e5e5e5;
		font-size: 28rpx;
		display: flex;
	}

	.form .list:last-child {
		border: none;
	}

	.form .list::after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}

	.form .list .left {
		width: 200rpx;
	}

	.form .list .right {
		text-align: left;
	}

	.form .list .right {
		flex: 1;
	}

	.form .list .right image {
		width: 200rpx;
	}
	.form .box{
		padding: 28rpx 0;
	}
	.form .box .title{
		margin-bottom: 20rpx;
	}

	.input {
		margin: 0 auto;
		width: 630rpx;
		margin-top: 80rpx;
	}

	.input button {
		color: #FFFFFF;
		font-size: 28rpx;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		background: #FE0520;
		border-radius: 40rpx;
	}
	.image-item{
		width: 200rpx;
		height: 200rpx;
		display: inline-block;
		margin-right: 20rpx;
		position: relative;
	}
	.image-item image{
		width: 100%;
		height: 100%;
	}
	.image-item .delete{
		position: absolute;
		right: 0;
		top: 0;
		width: 48rpx;
		height: 48rpx;
		background: url(../../static/delete.png);
		background-size: 100% 100%;
	}


	.card_01 image {
		width: 200rpx;
		height: 200rpx;
	}
</style>
